import QtQuick 2.15
import QtQuick.Controls 2.15

// UserDetailPage.qml - 可复用的用户详情页面
Rectangle {
    id: userDetailPage
    color: "#f5f5f5"

    property string username: ""
    property string description: ""
    property string avatar: ""
    property bool isFollowed: false
    property bool hasVip: false

    signal backClicked()

    Column {
        anchors.fill: parent

        // 顶部导航栏
        Rectangle {
            width: parent.width
            height: 60
            color: "white"

            Row {
                anchors.left: parent.left
                anchors.leftMargin: 15
                anchors.verticalCenter: parent.verticalCenter
                spacing: 15

                // 返回按钮
                Rectangle {
                    width: 30
                    height: 30
                    radius: 15
                    color: "#f0f0f0"

                    Text {
                        text: "←"
                        font.pixelSize: 16
                        color: "#333"
                        anchors.centerIn: parent
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: userDetailPage.backClicked()
                    }
                }

                Text {
                    text: username
                    font.pixelSize: 18
                    font.bold: true
                    color: "#333"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }

        // 用户信息区域
        Rectangle {
            width: parent.width
            height: 200
            color: "white"

            Column {
                anchors.centerIn: parent
                spacing: 20

                // 头像
                Rectangle {
                    width: 80
                    height: 80
                    radius: 40
                    color: "#ddd"
                    anchors.horizontalCenter: parent.horizontalCenter

                    Image {
                        anchors.fill: parent
                        source: avatar
                        fillMode: Image.PreserveAspectCrop
                    }

                    // VIP标识
                    Rectangle {
                        visible: hasVip
                        width: 20
                        height: 20
                        radius: 10
                        color: "#FFD700"
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom

                        Text {
                            text: "V"
                            color: "white"
                            font.pixelSize: 12
                            font.bold: true
                            anchors.centerIn: parent
                        }
                    }
                }

                // 用户名
                Text {
                    text: username
                    font.pixelSize: 20
                    font.bold: true
                    color: "#333"
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                // 描述
                Text {
                    text: description
                    font.pixelSize: 14
                    color: "#666"
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 300
                    wrapMode: Text.WordWrap
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }

        // 操作按钮区域
        Rectangle {
            width: parent.width
            height: 80
            color: "white"

            Row {
                anchors.centerIn: parent
                spacing: 20

                // 关注按钮
                Rectangle {
                    width: 120
                    height: 40
                    radius: 20
                    color: isFollowed ? "#f0f0f0" : "#00A1D6"

                    Text {
                        text: isFollowed ? "已关注" : "关注"
                        color: isFollowed ? "#666" : "white"
                        font.pixelSize: 16
                        anchors.centerIn: parent
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            isFollowed = !isFollowed
                        }
                    }
                }

                // 私信按钮
                Rectangle {
                    width: 120
                    height: 40
                    radius: 20
                    color: "#f0f0f0"
                    border.color: "#ddd"
                    border.width: 1

                    Text {
                        text: "私信"
                        color: "#333"
                        font.pixelSize: 16
                        anchors.centerIn: parent
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            console.log("私信", username)
                        }
                    }
                }
            }
        }

        // 统计信息
        Rectangle {
            width: parent.width
            height: 80
            color: "white"

            Row {
                anchors.centerIn: parent
                spacing: 50

                Column {
                    spacing: 5
                    Text {
                        text: "123"
                        font.pixelSize: 18
                        font.bold: true
                        color: "#333"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text {
                        text: "关注"
                        font.pixelSize: 14
                        color: "#666"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                Column {
                    spacing: 5
                    Text {
                        text: "456"
                        font.pixelSize: 18
                        font.bold: true
                        color: "#333"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text {
                        text: "粉丝"
                        font.pixelSize: 14
                        color: "#666"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                Column {
                    spacing: 5
                    Text {
                        text: "789"
                        font.pixelSize: 18
                        font.bold: true
                        color: "#333"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text {
                        text: "获赞"
                        font.pixelSize: 14
                        color: "#666"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
        }

        // 内容区域
        Rectangle {
            width: parent.width
            height: parent.height - 420
            color: "white"

            Text {
                text: "暂无更多内容"
                color: "#999"
                font.pixelSize: 16
                anchors.centerIn: parent
            }
        }
    }
}
